<template>
    <!-- 弹窗组件 -->
    <div class="dialog-box">
        <el-dialog v-model="dialogVisible" title="入库仓库" width="900px" :close-on-click-modal="false" :show-close="true">
            <div style="background: #fff; padding: 10px 0; padding-left: 20px;">
                <el-input v-model="search" placeholder="请输入关键字" style="width: 240px; margin-bottom: 10px;" clearable />
                <el-table :data="filteredWarehouses" border style="width: 100%;" highlight-current-row
                    @current-change="handleCurrentChange" :row-class-name="rowClassName">
                    <el-table-column width="100">
                        <template #default="{ row }">
                            <el-radio :model-value="selectedRow && selectedRow.id" :label="row.id"
                                @change="() => selectRow(row)" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="仓库名称" />
                    <el-table-column prop="code" label="仓库编号" />
                    <el-table-column prop="type" label="库房类型" />
                    <el-table-column prop="manager_name" label="库房人员" />
                    <el-table-column prop="manager_phone" label="联系电话" />
                    <el-table-column prop="address" label="库房地址" />
                </el-table>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closeDialog">取消</el-button>
                    <el-button color="#626aef" type="primary" @click="confirmSelect">确认</el-button>
                </div>
            </template>
        </el-dialog>

        <SelectManagerDialog v-model:visible="showManagerDialog" :orgTree="orgTree" :userList="userList"
            :modelValue="selectedManager" @select="onManagerSelect" />
    </div>
</template>

<script setup lang="ts">
import { ref, watch, computed, reactive, onMounted } from "vue";
import { ElMessage } from 'element-plus';
import api from "@/api";
import SelectManagerDialog from './SelectManagerDialog.vue';

const props = defineProps<{
    dialogVisible: boolean
    dialogType?: string
    dialogRow?: Record<string, any>
    groups?: { id: string; name: string }[]
    products?: { id: string; name: string; code: string; spec: string; groupId: string }[]
    modelValue?: any[]
    warehouses?: {
        id: string | number
        name: string
        code?: string
        type?: string
        manager?: string
        phone?: string
        address?: string
        [key: string]: any
    }[]
}>();

const showManagerDialog = ref(false);
const orgTree = ref([
    {
        id: 1, label: '灵感嘉主工作室', children: [
            { id: 2, label: '采购部' },
            { id: 3, label: '采购一部' },
            { id: 4, label: '采购二部' }
        ]
    },
    { id: 5, label: '设计部' },
    { id: 6, label: '产品部' },
    { id: 7, label: '出库部' }
]);
const userList = ref([
    { id: 1, name: '丁冉容', code: '100001', role: '库管人员', phone: '13567899876', orgId: 2 },
    { id: 2, name: '纪广', code: '100002', role: '采购人员', phone: '13567899876', orgId: 2 },
    { id: 3, name: '庞意', code: '100003', role: '采购人员', phone: '13567899876', orgId: 2 },
    { id: 4, name: '顾伦', code: '100004', role: '采购人员', phone: '13567899876', orgId: 2 }
]);
const selectedManager = ref({});
const onManagerSelect = (selectedUser) => {
    selectedManager.value = selectedUser;
    formData.manager = selectedUser.name;
};

const emit = defineEmits(['update:dialogVisible', 'submit', 'update:modelValue', 'confirm']);


// 表单数据
const formData = reactive({
    id: '',
    name: '',
    code: '',
    type: '',
    phone: '',
    address: '',
    remark: '',
    manager: '',
    parent_id: '',
    parent_name: '',
    products: []
});

// 监听对话框显示状态
const dialogVisible = computed({
    get: () => props.dialogVisible,
    set: (val) => {
        emit('update:dialogVisible', val);
    }
});

// 监听props变化
watch(() => props.dialogVisible, (newVal) => {
    if (newVal) {
        // 打开弹窗时，初始化表单数据
        initFormData();
    }
});

// 初始化表单数据
const initFormData = () => {


};





const selectedProducts = ref<any[]>([...(props.modelValue ?? [])]);

watch(() => props.modelValue, (val) => {
    selectedProducts.value = [...(val ?? [])];
});

function closeDialog() {
    emit('update:dialogVisible', false);
}

function confirmSelect() {
   
    if (selectedRow.value?.id) {

        emit('update:modelValue', selectedProducts.value);
        emit('confirm', selectedRow.value);
        emit('update:dialogVisible', false);

    } else {
        ElMessage.error('请选择仓库');
    }
}

const search = ref('');
const selectedRow = ref<any>(props.modelValue ?? null);

watch(() => props.modelValue, (val) => {
    selectedRow.value = val ?? null;
});



const filteredWarehouses = computed(() => {
    const list = props.warehouses ?? [];
    if (!search.value) return list;
     
    return list.filter(
        w =>
        
            w.name.includes(search.value) ||
            (w.code?.includes(search.value) )
            //  ||
            // (w.type?.includes(search.value) ?? false) ||
            // (w.manager?.includes(search.value) ?? false) ||
            // (w.phone?.includes(search.value) ?? false) ||
            // (w.address?.includes(search.value) ?? false)
    
        );
});

function selectRow(row: any) {

    selectedRow.value = row;
}
function handleCurrentChange(row: any) {
    selectedRow.value = row;
}
function rowClassName({ row }: { row: any }) {
    return selectedRow.value && row.id === selectedRow.value.id ? 'current-row' : '';
}

</script>

<style lang="scss" scoped>
::v-deep .el-menu-item {
    height: 38px;

}

::v-deep .el-menu-item.is-active {
    color: #6860FF;
    background-color: #6860ff29;

}

:deep(.el-dialog) {
    --el-dialog-padding-primary: 0px;
}

:deep(.el-dialog__header) {
    padding: 10px 16px;
    border-bottom: 1px solid #f0f0f0;
    font-weight: bold;
}

:deep(.dialog-footer) {
    padding: 10px 16px;
    border-top: 1px solid #f0f0f0;
}

:deep(.el-dialog__headerbtn .el-dialog__close) {
    color: #000;
}

:deep(.el-dialog__body) {
    padding: 20px 10px;
    padding-right: 30px;
}

.select-product-dialog {
    display: flex;
    min-height: 400px;
    gap: 10px;
}

.group-list {
    width: 220px;
    border-right: 1px solid #eee;
    padding: 10px 10px 10px 10px;
    background: #fafbfc;
}

.group-title {
    font-weight: bold;
    margin-bottom: 10px;

}

.group-menu {
    border: none;
    background: transparent;
}

.product-table {

    padding: 10px 20px;
    border: 1px solid #eee;
    background: #fff;
}

.selected-list {
    width: 400px;
    padding: 10px 10px 10px 20px;
    border: 1px solid #eee;
}

.selected-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.el-table .current-row {
    background: #f5f7fa !important;
}
</style>
